<template>
  <div class="surplus">
    <div style="width: 100%;height: 400px;overflow: hidden;" ref="user_surplus">

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import {getUserDailySurplus} from "../utils/api";
import utils from "@/utils/time";

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
]);
/*
今天送出余额s
今天参与人数
累计送出余额

柱状图
初试拿7天数据
* 送出余额
* 参与人数
* 每个任务均价
select uid,count(*) as surplus_count,TRUNCATE(SUM(surplus_change),3) AS surplus_sum from surplus_log where time>1664252601971 and surplus_change<20 GROUP BY uid ORDER BY surplus_sum DESC;
* */
export default {
  name: "UserSurplus",
  data(){
    return{
      allInfo:[],
      fl:{},
      all:''
    }
  },
  created() {
  },
  methods:{
    init(){
      let time = new Date(new Date().setHours(0, 0, 0, 0) )-(6*24*60*60*1000)
      getUserDailySurplus({time}).then(res=>{
        if(res.status==200){
          this.allInfo = res?.body?.allInfo
          this.all = res?.body?.all
          this.allInfo.forEach(v=>{
            v.time = utils.timestampToTime(v.time,2)
            if(this.fl[v.time]){
              if(this.fl[v.time][v.uid]){
                this.fl[v.time][v.uid].push(v)
              }else{
                this.fl[v.time][v.uid] = [v]
              }
            }else{
              this.fl[v.time]= {}
              this.fl[v.time][v.uid] = [v]
            }
          })
        }
        this.echartsInit()
      }).catch(err=>{
        console.log(err)
      })
    },
    echartsInit(){
      let myChart = echarts.init(this.$refs.user_surplus, null);
      window.onresize = function () {
        myChart.resize();
      };
      // 绘制图表
      myChart.setOption({
        title: {
          text: '每日奖励活动',
          left: '5%',
          top:'3%',
          subtext:`已累计送出奖励${this.all}元`
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          right:'20',
          orient:'vertical'
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: Object.keys(this.fl)
        },
        series: [
          {
            name: `参加活动人数`,
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: Object.values(this.fl).map(v =>{
              return Object.keys(v).length
            })
          },
          {
            name: '累计送出余额',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: Object.values(this.fl).map(v =>{
              let sum = 0
              Object.values(v).map(va=>{
                va.map(vb =>{
                  sum += (vb?.surplus_change-0)
                })
              })
              return sum.toFixed(2)-0
            })
          },
        ]
      });
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>

</style>